# 产品展示区（左右分栏）
<template>
  <section class="product-showcase">
    <div class="container">
      <div class="product-content">
        <!-- 左侧产品图片 -->
        <div class="product-image">
          <div class="image-container">
            <div class="phone-mockup">
              <div class="screen">
                <div class="camera-cutout"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧产品信息 -->
        <div class="product-info">
          <h2 class="product-title">HUAWEI Pura70 Pro+</h2>

          <!-- 价格信息 -->
          <div class="price-section">
            <div class="price-tag">¥8979</div>
            <div class="price-desc">折合；无限总内存：256GB</div>
          </div>

          <!-- 操作按钮 -->
          <ActionButtons />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import ActionButtons from './ActionButtons.vue'

export default {
  name: 'ProductShowcase',
  components: {
    ActionButtons
  }
}
</script>

<style scoped>
.product-showcase {
  background: #fff;
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.product-content {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.product-image {
  flex: 6;
}

.image-container {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}

.phone-mockup {
  width: 300px;
  height: 600px;
  background: #d7000f;
  border-radius: 40px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(215, 0, 15, 0.2);
}

.screen {
  width: 280px;
  height: 580px;
  background: #000;
  border-radius: 32px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.camera-cutout {
  width: 60px;
  height: 30px;
  background: #000;
  border-radius: 15px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.product-info {
  flex: 4;
  padding-top: 20px;
}

.product-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.price-section {
  margin-bottom: 30px;
}

.price-tag {
  font-size: 36px;
  color: #d7000f;
  font-weight: bold;
  margin-bottom: 8px;
}

.price-desc {
  color: #666;
  font-size: 16px;
}
</style>